<template>
  <div class="container">
    <div class="container-header">
      <h2>订单列表</h2>
    </div>
    <div class="container-main">
      <el-divider content-position="left">编码转码</el-divider>
      <div class="base64-container">
        <div class="base64-container-up">
          <div class="source-code">
            <el-input
              type="textarea"
              placeholder="源码"
              v-model="sourceCode"
              class="height100"
            >
            </el-input>
          </div>
          <div class="transIcon">
            <i :class="getIconClass()"></i>
          </div>
          <div class="transcoding">
            <el-input
              type="textarea"
              placeholder="转码"
              v-model="transcoding"
              class="height100"
            >
            </el-input>
          </div>
        </div>
        <div class="base64-container-down">
          <div class="buttons-container">
            <el-button
              @mouseenter.native="handleMouseMove('translate','enter')"
              @mouseleave.native="handleMouseMove('translate','leave')"
              @click="tanslateCodeByBase64"
            >转码</el-button>
            <el-button
              @mouseenter.native="handleMouseMove('decode','enter')"
              @mouseleave.native="handleMouseMove('decode','leave')"
              @click="decodeByBase64"
            >解码</el-button>
          </div>
        </div>
        
      </div>
      
      <el-divider content-position="left">琵琶行-白居易</el-divider>
      <div class="copyAndDownload-container">
        <div class="article-content">
          <span>{{testText.content}}</span>
        </div>
        <div class="btn-content">
          <el-button @click="copySign">复制</el-button>
        </div>
        <div class="btn-content">
          <el-button @click="download">下载</el-button>
        </div>
      </div>

      <el-divider content-position="left">一些自定义表单控件</el-divider>
      <div class="myCard-container">
        <span style="display:block;margin-bottom: 8px;">选择零食：</span>
        <CardSelect v-model="cardSelectOptions"></CardSelect>
      </div>
      <div class="myHourMinuteSelect-container">
        <span style="display:block;margin-bottom: 8px;">选择时间：</span>
        <HourMinuteSelect v-model="timeValue" @changeChecked="(val) => changeTimeValue(val)"></HourMinuteSelect>
      </div>
    </div>
    
  </div>
</template>

<script>
const Base64 = require("js-base64").Base64
import CardSelect from '../../../components/CardSelect.vue'
import HourMinuteSelect from '@/components/HourMinuteSelect'

export default {
  name: "OrderList",
  components: {
    CardSelect,
    HourMinuteSelect
  },
  data() {
    return {
      isHoverTranslate: false,
      isHoverDecode: false,
      sourceCode: "",
      transcoding: "",
      testText: require("./article.json"),
      cardSelectOptions: ["1","5"],
      timeValue: "02:10"
    }
  },
  mounted() {
    // console.log(this.testText);
  },
  methods: {
    getIconClass() {
      if(this.isHoverTranslate && this.isHoverDecode) {
        return "el-icon-minus"
      } else if(!this.isHoverTranslate && this.isHoverDecode) {
        return "el-icon-back"
      } else if(this.isHoverTranslate && !this.isHoverDecode) {
        return "el-icon-right"
      } else {
        return "el-icon-minus"
      }
    },
    handleMouseMove(type,move) {
      if(type == "translate") {
        if(move == "enter") {
          this.isHoverTranslate = true;
        } else if(move == "leave") {
          this.isHoverTranslate = false;
        }
      } else if(type == "decode") {
        if(move == "enter") {
          this.isHoverDecode = true;
        } else if(move == "leave") {
          this.isHoverDecode = false;
        }
      }
    },
    tanslateCodeByBase64() {
      if(this.sourceCode) {
        this.transcoding = Base64.encode(this.sourceCode)
        this.$message({
          type: "success",
          message: "转码成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "请输入源码"
        })
      }
    },
    decodeByBase64() {
      if(this.transcoding) {
        this.sourceCode = Base64.decode(this.transcoding)
        this.$message({
          type: "success",
          message: "解码成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "请输入转码"
        })
      }
    },
    copySign() {
      this.$copyText(this.testText.content).then((e) => {
        this.$message({
          type: "success",
          message: "已复制到剪切板"
        })
        // console.log(e,"剪切方法成功")
      }, (e) => {
        this.$message({
          type: "error",
          message: "复制失败，请重试"
        })
        // console.log(e,"剪切方法失败")
      })
    },
    download() {
      const element = document.createElement('a')
      element.style.display = 'none'
      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.testText.content))
      element.setAttribute('download', '琵琶行')
      element.click()
      element.remove()
    },
    changeTimeValue(val) {
      console.log(val);
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  // overflow-x: hidden;
  // overflow-y: auto;
  .container-header {
    width: 100%;
    height: 40px;
  }
  .container-main {
    width: 100%;
    flex: 1;
    .base64-container {
      width: 100%;
      height: 300px;
      .base64-container-up {
        height: 80%;
        display: flex;
        .source-code {
          flex: 1;
          height: 100%;
        }
        .transIcon {
          width: 100px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-size: 32px;
          }
        }
        .transcoding {
          flex: 1;
          height: 100%;
        }
      }
      .base64-container-down {
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        .buttons-container {
          width: auto;
        }
      }
    }
    .copyAndDownload-container {
      width: 100%;
      height: 180px;
      margin-top: 16px;
      display: flex;
      align-items: center;
      .article-content {
        flex: 1;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;  
        -webkit-line-clamp: 5;  
        -webkit-box-orient: vertical;  
        text-indent: 40px;
        span {
          font-size: 20px;
          line-height: 36px;
        }
      }
      .btn-content {
        width: 140px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .myCard-container {
      min-width: 60%;
      height: 100px;
      margin-top: 16px;
    }
    .myHourMinuteSelect-container {
      min-width: 300px;
      max-width: 600px;
    }
  }
} 
::v-deep .height100.el-textarea {
  height: 100%;
  .el-textarea__inner {
    height: 100%;
  }
}

.el-divider {
  .el-divider__text {
    background-color: transparent;
  }
}
</style>